<template>
	<div class="home" style="padding-top:43px;">
		<NavBar />
		<HomeBanner :list="swiperList" />
		<div class="bg-white flex justify-center">
			<div class="container-width flex flex-row items-center justify-evenly" style="height:154px;">
				<div class="flex flex-col items-center">
					<div style="font-size: 35px;font-weight: 500;color: #000000;line-height: 49px;letter-spacing: 2px;">
						{{ dictList[0] ? dictList[0].dictValue : 0 }}
						<span style="font-size: 16px;">条</span>
					</div>
					<div style="font-size: 14px;font-weight: 400;color: #000000;line-height: 20px;">本月新增商机</div>
				</div>
				<div class="w-px h-16 bg-[#E5E5E5]" style="margin: auto 20px;"></div>
				<div class="flex flex-col items-center">
					<div style="font-size: 35px;font-weight: 500;color: #000000;line-height: 49px;letter-spacing: 2px;">
						{{ dictList[1] ? dictList[1].dictValue : 0 }}
						<span style="font-size: 16px;">条</span>
					</div>
					<div style="font-size: 14px;font-weight: 400;color: #000000;line-height: 20px;">累计对接项目</div>
				</div>
				<div class="w-px h-16 bg-[#E5E5E5]" style="margin: auto 20px;"></div>
				<div class="flex flex-col items-center">
					<div style="font-size: 35px;font-weight: 500;color: #000000;line-height: 49px;letter-spacing: 2px;">
						{{ dictList[2] ? dictList[2].dictValue : 0 }}
						<span style="font-size: 16px;">家</span>
					</div>
					<div style="font-size: 14px;font-weight: 400;color: #000000;line-height: 20px;">企业库</div>
				</div>
				<div class="w-px h-16 bg-[#E5E5E5]" style="margin: auto 20px;"></div>
				<div class="flex flex-col items-center">
					<div style="font-size: 35px;font-weight: 500;color: #000000;line-height: 49px;letter-spacing: 2px;">
						{{ dictList[3] ? dictList[3].dictValue : 0 }}
						<span style="font-size: 16px;">家</span>
					</div>
					<div style="font-size: 14px;font-weight: 400;color: #000000;line-height: 20px;">园区库</div>
				</div>
				<div class="w-px h-16 bg-[#E5E5E5]" style="margin: auto 20px;"></div>
				<div class="flex flex-col items-center">
					<div style="font-size: 35px;font-weight: 500;color: #000000;line-height: 49px;letter-spacing: 2px;">
						{{ dictList[4] ? dictList[4].dictValue : 0 }}
						<span style="font-size: 16px;">条</span>
					</div>
					<div style="font-size: 14px;font-weight: 400;color: #000000;line-height: 20px;">政策库</div>
				</div>
			</div>
		</div>



	<!-- 精品园区1 开始 -->
		<div class="mt-8 mb-8 flex justify-center" >
			<div class="container-width">
				<div class="">

					<!-- 标题栏 开始 -->
					<div class="flex flex-row justify-between border-l-4 border-[#FE7743] mb-6">
						<div class="flex flex-row items-center ml-2 text-base font-semibold"
							style="font-size: 18px;font-weight: 600;color: #000000;letter-spacing: 1px;">
							精品园区
							<div class="flex flex-row justify-center items-center text-white ml-2"
								style="cursor: pointer;padding:0px 4px;font-size: 10px;background: #FE7743;"
								@click="goToCreatePark">
								园区免费发布
								<img src="../assets/arrow_right.png" style="margin-left:4px;width:6px;height: 6px;" />
							</div>
						</div>
						<div style="font-size: 12px;font-weight: 600;color: #1984C4;cursor: pointer;"
							@click="goToParkListPage">更多精品园区>>
						</div>
					</div>
					<!-- 标题栏 结束 -->

					<!-- 内容开始 -->
					<div class="flex justify-start flex-wrap justify-between" style="position:relative;height:555px;overflow:hidden">

						<!-- 左点击开始 -->
						<div @click="yuanquPrePage" style="width:30px;height:555px;position:absolute;left:0px;display: flex;align-items: center;justify-content: center;z-index: 100;">
							<div style="padding-right: 5px;cursor: pointer;width: 28px;height: 28px;display: flex;justify-content:center;align-items: center;border-radius: 100%;background-size: cover;background-color: rgba(0, 0, 0, 0.4);color:#FFFFFF;">
								《
							</div>
						</div>
						<!-- 左点击结束 -->

						<!-- 内容开始1 -->
						<div class="list1" >
							<div v-for="(item, index) in yuanquList" :key="index" style="width: 214px;height: 180px;"
							class="flex flex-col mb-3.5 cc rowup" @click="goToParkDetailPage(item.id)">
							    <div class="flex relative">
								    <img :src="item.logourl" style="width: 214px;height: 131px;cursor: pointer;" />
								    <div class="leftIcon">{{ item.guojiajibie }}</div>
								    <div v-if="item.ifvr == 'Y'" class="leftVR" style="cursor: pointer;">
								    	<div class="leftVRText">VR</div>
								    </div>
								    <div style="padding: 0px 7px;"
									    class="absolute bottom-0 left-0 flex h-7 bg-black/30 text-[12px] text-white w-full flex flex-row justify-between items-center">

									    <div class="flex flex-1 items-center">
										    <div class="flex justify-center items-center"
											    style="width: 15px;height: 15px;background: #FE7743;font-size: 12px;font-weight: 400;color: #FFFFFF;">
											    {{ item.yuanqujiaobiao }}
										    </div>
										    <div
											    style="width:100px;margin-left:4px;font-size: 12px;font-weight: 500;color: #FFFFFF;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
											    {{ item.yuanquname }}
										    </div>
									    </div>
									    <div style="width:80px;font-size: 12px;font-weight: 500;color: #FFFFFF;">
										    {{ item.provincename }} {{ item.cityname }}
									    </div>
								    </div>
							    </div>
							    <div class="flex flex-row text-[12px] bg-white" style="padding: 6px 7px;white-space: nowrap;text-overflow: ellipsis;width: 215px;overflow: hidden;}">
								    <div v-for="(c, cindex) in item.yuanqubiaoqianArr" :key="cindex"
									    class="mr-1 px-1 py-0.5 border border-[#FE7743] text-[#FE7743]">{{ c }}
								    </div>
							    </div>
						    </div>						
					    </div>
						<!-- 内容结束1 -->
						
						
						<div v-if="yuanquList.length % yuanquListQuery.pageSize != 0"
							v-for="index in yuanquList.length % yuanquListQuery.pageSize" :key="'box' + index"
							style="width: 214px;height: 180px;">
						</div>

						<!-- 右点击 开始	 -->
						<!-- <div @click="yuanquNextPage" style="width:30px;height:555px;position:absolute;right:0px;display: flex;align-items: center;justify-content: center;z-index: 100;">
							<div style="padding-left: 8px;cursor: pointer;width: 28px;height: 28px;display: flex;justify-content:center;align-items: center;border-radius: 100%;background-size: cover;background-color: rgba(0, 0, 0, 0.4);color:#FFFFFF;">
								》
							</div>
						</div> -->
						<!-- 右点击 结束 -->
						
					</div>
				</div>
			</div>
		</div>
		<!-- 精品园区1 结束 -->

	<!-- 精品园区2 开始 -->
	<div class="mt-8 mb-8 flex justify-center" style="margin-top: -635px;">
			<div class="container-width">
				<div class="">

					<!-- 标题栏 开始 -->
					<div class="flex flex-row justify-between border-l-4 border-[#FE7743] mb-6">
						<div class="flex flex-row items-center ml-2 text-base font-semibold"
							style="font-size: 18px;font-weight: 600;color: #000000;letter-spacing: 1px;">
							精品园区
							<div class="flex flex-row justify-center items-center text-white ml-2"
								style="cursor: pointer;padding:0px 4px;font-size: 10px;background: #FE7743;"
								@click="goToCreatePark">
								园区免费发布
								<img src="../assets/arrow_right.png" style="margin-left:4px;width:6px;height: 6px;" />
							</div>
						</div>
						<div style="font-size: 12px;font-weight: 600;color: #1984C4;cursor: pointer;"
							@click="goToParkListPage">更多精品园区>>
						</div>
					</div>
					<!-- 标题栏 结束 -->

					<!-- 内容开始 -->
					<div class="flex justify-start flex-wrap justify-between" style="position:relative;height:555px;overflow:hidden">

						<!-- 左点击开始 -->
						<!-- <div @click="yuanquPrePage" style="width:30px;height:555px;position:absolute;left:0px;display: flex;align-items: center;justify-content: center;z-index: 100;">
							<div style="padding-right: 5px;cursor: pointer;width: 28px;height: 28px;display: flex;justify-content:center;align-items: center;border-radius: 100%;background-size: cover;background-color: rgba(0, 0, 0, 0.4);color:#FFFFFF;">
								《
							</div>
						</div> -->
						<!-- 左点击结束 -->

						<!-- 内容开始2 -->
						<div class="list2">
							<div v-for="(item, index) in yuanquList" :key="index" style="width: 214px;height: 180px;"
							class="flex flex-col mb-3.5 cc rowup2" @click="go2ToParkDetailPage(item.id)">
							    <div class="flex relative">
								    <img :src="item.logourl" style="width: 214px;height: 131px;cursor: pointer;" />
								    <div class="leftIcon">{{ item.guojiajibie }}</div>
								    <div v-if="item.ifvr == 'Y'" class="leftVR" style="cursor: pointer;">
								    	<div class="leftVRText">VR</div>
								    </div>
								    <div style="padding: 0px 7px;"
									    class="absolute bottom-0 left-0 flex h-7 bg-black/30 text-[12px] text-white w-full flex flex-row justify-between items-center">

									    <div class="flex flex-1 items-center">
										    <div class="flex justify-center items-center"
											    style="width: 15px;height: 15px;background: #FE7743;font-size: 12px;font-weight: 400;color: #FFFFFF;">
											    {{ item.yuanqujiaobiao }}
										    </div>
										    <div
											    style="width:100px;margin-left:4px;font-size: 12px;font-weight: 500;color: #FFFFFF;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
											    {{ item.yuanquname }}
										    </div>
									    </div>
									    <div style="width:80px;font-size: 12px;font-weight: 500;color: #FFFFFF;">
										    {{ item.provincename }} {{ item.cityname }}
									    </div>
								    </div>
							    </div>
							    <div class="flex flex-row text-[12px] bg-white" style="padding: 6px 7px;white-space: nowrap;text-overflow: ellipsis;width: 215px;overflow: hidden;}">
								    <div v-for="(c, cindex) in item.yuanqubiaoqianArr" :key="cindex"
									    class="mr-1 px-1 py-0.5 border border-[#FE7743] text-[#FE7743]">{{ c }}
								    </div>
							    </div>
						    </div>						
					    </div>
						<!-- 内容结束1 -->
						
						
						<div v-if="yuanquList.length % yuanquListQuery.pageSize != 0"
							v-for="index in yuanquList.length % yuanquListQuery.pageSize" :key="'box' + index"
							style="width: 214px;height: 180px;">
						</div>

						<!-- 右点击 开始	 -->
						<div @click="yuanquNextPage" style="width:30px;height:555px;position:absolute;right:0px;display: flex;align-items: center;justify-content: center;z-index: 100;">
							<div style="padding-left: 8px;cursor: pointer;width: 28px;height: 28px;display: flex;justify-content:center;align-items: center;border-radius: 100%;background-size: cover;background-color: rgba(0, 0, 0, 0.4);color:#FFFFFF;">
								》
							</div>
						</div>
						<!-- 右点击 结束 -->
						
					</div>
				</div>
			</div>
		</div>
		<!-- 精品园区2 结束 -->	

		<!-- 广告 开始 -->
		<div class="mb-8 flex justify-center">
			<div class="container-width"><img :src="ad1.pictureurl" @click="windowOpen(ad1.linkurl)"
					style="cursor: pointer;" /></div>
		</div>
		<!-- 广告结束 -->

		
		<div class="mb-8 flex justify-center">
			<div class="container-width">
				<div>
					<div class="flex flex-row justify-between border-l-4 border-[#FE7743] mb-6">
						<div class="flex flex-row items-center ml-2 text-base font-semibold"
							style="font-size: 18px;font-weight: 600;color: #000000;letter-spacing: 1px;">
							入驻项目精选
							<div class="flex flex-row justify-center items-center text-white ml-2"
								style="cursor: pointer;padding:0px 4px;font-size: 10px;font-weight: 600;background: #FE7743;"
								@click="goToCreateProject">
								项目免费发布
								<img src="../assets/arrow_right.png" style="margin-left:4px;width:6px;height: 6px;" />
							</div>
						</div>
						<div style="font-size: 12px;font-weight: 600;color: #1984C4;cursor: pointer;"
							@click="goToProjectListPage">更多优质项目>></div>
					</div>
					<div class="w-full flex flex-wrap justify-between" style="height: 428px;">
						<div @click="projectPrePage"
							style="width:30px;height: 428px;position:absolute;left:-40px;display: flex;align-items: center;justify-content: center;">
							<div
								style="cursor: pointer;width: 28px;height: 28px;display: flex;justify-content:center;align-items: center;border-radius: 100%;background-size: cover;background-color: rgba(0, 0, 0, 0.4);color:#FFFFFF;">
								< </div>
							</div>
							<div v-for="(item, index) in projectList" :key="index"
								class="flex flex-col border border-[#EDEDED] mb-3.5"
								style="background-color:#ffffff;width: 286px;padding: 13px 15px;    height: 138px;"
								@click="goToProjectDetailPage(item.id)">
								<div class="text-sm"
									style="font-size: 13px;font-weight: 400;color: #000000;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
									{{ item.projectname }}
								</div>
								<div class="flex flex-row text-[12px] pt-2.5">
									<div v-for="(bqitem, bqindex) in item.biaoqianArr" :key="bqindex"
										style="cursor: pointer;"
										class="mr-1 px-1 py-0.5 border border-[#FE7743] text-[#FE7743]">
										{{ bqitem }}
									</div>
								</div>
								<div class="flex flex-row">
									<div class="flex-1 pt-2.5 text-sm text-[#EE1A23]">
										<div style="font-size: 13px;font-weight: 500;color: #EE1A23;">
											{{ item.touziyuji }}
											<span style="font-size: 11px;font-weight: 400;color: #EE1A23;">万元</span>
										</div>
										<div style="font-size: 11px;font-weight: 400;color: #746F6B;">投资总额</div>
									</div>
									<div class="flex-1 pt-2.5 text-sm text-[#EE1A23]">
										<div style="font-size: 13px;font-weight: 500;color: #EE1A23;">
											{{ item.shuishouyuji }}
											<span style="font-size: 11px;font-weight: 400;color: #EE1A23;">万元</span>
										</div>
										<div style="font-size: 11px;font-weight: 400;color: #746F6B;">预计缴税</div>
									</div>
									<div class="flex-1 pt-2.5 text-sm text-[#EE1A23]">
										<div style="font-size: 13px;font-weight: 500;color: #EE1A23;">
											{{ item.cityname }}
											<span style="font-size: 11px;font-weight: 400;color: #EE1A23;"></span>
										</div>
										<div style="font-size: 11px;font-weight: 400;color: #746F6B;">意向地区</div>
									</div>
								</div>
							</div>
							<div v-if="projectList.length % projectListQuery.pageSize != 0"
								v-for="index in projectList.length % projectListQuery.pageSize" :key="'box' + index"
								style="width: 286px;height: 428px;"></div>
						
						</div>
					</div>
				</div>
			</div>
			<div class="mb-8 flex justify-center">
				<div class="container-width"><img :src="ad2.pictureurl" @click="windowOpen(ad2.linkurl)"
						style="cursor: pointer;" /></div>
			</div>
			<div class="mb-8 flex justify-center">
				<div class="container-width">
					<div class="">
						<div class="flex flex-row justify-between border-l-4 border-[#FE7743] mb-6">
							<div class="flex flex-row items-center ml-2 text-base font-semibold"
								style="font-size: 18px;font-weight: 600;color: #000000;letter-spacing: 1px;">
								精准项目对接
								<div class="flex flex-row justify-center items-center text-white ml-2"
									style="cursor: pointer;padding:0px 4px;font-size: 10px;font-weight: 600;background: #FE7743;"
									@click="goToCreateDocking">
									我要对接
									<img src="../assets/arrow_right.png"
										style="margin-left:4px;width:6px;height: 6px;" />
								</div>
							</div>
							<div style="font-size: 12px;font-weight: 600;color: #1984C4;cursor: pointer;"
								@click="goToProjectDockingListPage">更多对接活动>></div>
						</div>
						<div class="w-full flex justify-between" style="position:relative;height: 190px;">
							<div @click="dockingPrePage"
								style="width:30px;height: 190px;position:absolute;left:-40px;display: flex;align-items: center;justify-content: center;">
								<div
									style="cursor: pointer;width: 28px;height: 28px;display: flex;justify-content:center;align-items: center;border-radius: 100%;background-size: cover;background-color: rgba(0, 0, 0, 0.4);color:#FFFFFF;">
									< </div>
								</div>
								<div v-for="(item, index) in dockingList" :key="index"
									style="width: 287px;height: 190px;" class="flex flex-col mb-3.5"
									@click="goToProjectDockingDetailPage(item.id)">
									<div style="width: 287px;height: 153px;"><img :src="item.pictureurl"
											style="width: 287px;height: 153px;cursor: pointer;" /></div>
									<div
										style="cursor: pointer;background-color:#FFFFFF;padding:5px 8px;font-size: 18px;font-weight: 600;color: #000000;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
										{{ item.name }}
									</div>

									<!--
                <div style="margin-top:7px;font-size: 12px;font-weight: 400;color: #000000;">时间：{{ item.createTime }}</div>
                <div style="margin-top:7px;font-size: 12px;font-weight: 400;color: #000000;">直播状态：{{ item.zhibozhuangtai }}</div>
                <div style="margin-top:7px;font-size: 12px;font-weight: 400;color: #000000;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">会议简介：{{ item.jianjie }}</div>
                -->
								</div>
								<div v-if="dockingList.length % dockingListQuery.pageSize != 0"
									v-for="index in dockingList.length % dockingListQuery.pageSize" :key="'box' + index"
									style="width: 287px;height: 190px;"></div>
								<div @click="dockingNextPage"
									style="width:30px;height: 190px;position:absolute;right:-40px;display: flex;align-items: center;justify-content: center;">
									<div
										style="cursor: pointer;width: 28px;height: 28px;display: flex;justify-content:center;align-items: center;border-radius: 100%;background-size: cover;background-color: rgba(0, 0, 0, 0.4);color:#FFFFFF;">
										>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="mb-8 flex justify-center">
					<div class="container-width"><img :src="ad3.pictureurl" @click="windowOpen(ad3.linkurl)"
							style="cursor: pointer;" /></div>
				</div>
				<div class="mb-8 flex justify-center" style="margin-bottom: -0.8rem;">
					<div class="container-width">
						<div class="">
							<div class="flex flex-wrap justify-between">
								<div v-for="(item, index) in newsList" :key="index" class="flex flex-col"
									style="width:422px;margin-bottom: 31px;">
									<div class="w-full flex flex-row justify-between border-l-4 border-[#FE7743] mb-6">
										<div class="flex flex-row ml-2 text-base font-semibold">{{ item.name }}</div>
										<div style="font-size: 12px;font-weight: 600;color: #1984C4;cursor: pointer;"
											@click="goToNewsListPage()">更多>></div>
									</div>
									<div class="flex flex-col">
										<div v-for="(item2, nindex) in item.news" :key="nindex" class="flex"
											style="margin-bottom: 10px;" @click="goToNewsDetailPage(item2.id)">
											<div v-if="nindex == 0" style="width:50%;height:137px;" class="mr-2.5">
												<img :src="item2.pictureurl"
													style="width:100%;height:137px;cursor: pointer;" />
											</div>
											<div v-if="nindex == 0" class="flex flex-col"
												style="width:50%;height: 137px;">
												<div class="news-title"
													style="height:28px;font-size: 16px;font-weight: 700;letter-spacing: 1px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;cursor: pointer;">
													{{ item2.newsname }}
												</div>
												<div style="font-size: 12px;font-weight: 400;color: #000000;letter-spacing: 1px;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;cursor: pointer;"
													class="">
													{{ setContent(item2.content) }}
												</div>
											</div>
											<div v-else class="news-title"
												style="font-size: 16px;font-weight: 400;letter-spacing: 1px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;cursor: pointer;">
												{{ item2.newsname }}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="duijie" style="position: relative;" id="createParkForm">
					<div class="duijieitem" :style="activeHeight" :class="whether ? 'isFixed' : ''"
						style="z-index: 800;">
						<div class="duijiexiangmu mb-3 flex" :style="activeHeight">
							<div class="duijiexiangmuText flex-1">我要对接</div>
							<div class="flex-1 flex justify-end" style="padding-right:15px;">
								<img v-if="duijieActive" style="width:20px;height:20px;" src="../assets/shuoxiao.png"
									@click="changeDuijieActive(0)" />
								<img v-else style="width:20px;height:20px;" src="../assets/fangda.png"
									@click="changeDuijieActive(1)" />
							</div>
						</div>
						<div v-if="duijieActive" style="padding: 0 15px;">
							<el-form ref="dataForm" :model="yuanquForm" label-width="0px">
								<el-form-item label="" style="margin-bottom:16px;">
									<el-radio v-model="yuanquForm.type" label="1">园区</el-radio>
									<el-radio v-model="yuanquForm.type" label="2">企业项目</el-radio>
									<el-radio v-model="yuanquForm.type" label="3">其他</el-radio>
								</el-form-item>
								<el-form-item label="" style="margin-bottom:16px;">
									<el-input v-model="yuanquForm.yuanquname" prefix-icon="el-icon-school"
										placeholder="园区名称"></el-input>
								</el-form-item>
								<el-form-item label="" style="margin-bottom:16px;">
									<el-input v-model="yuanquForm.name" prefix-icon="el-icon-user"
										placeholder="姓名"></el-input>
								</el-form-item>
								<el-form-item label="" style="margin-bottom:16px;">
									<el-input v-model="yuanquForm.mobile" prefix-icon="el-icon-mobile-phone"
										placeholder="电话（必填）"></el-input>
								</el-form-item>
							</el-form>
							<a href="#" class="fasong" @click="addContact">发送</a>
						</div>
					</div>
				</div>
			</div>
</template>

<script>
	import NavBar from '@/components/NavBar.vue';
	import HomeBanner from '@/components/HomeBanner.vue';
	import {
		fetchProjectList
	} from '@/api/project';
	import {
		fetchParkList
	} from '@/api/park';
	import {
		fetchDictList
	} from '@/api/dict';
	import {
		fetchSwiperList
	} from '@/api/swiper';
	import {
		fetchHomeNewsList
	} from '@/api/news';
	import {
		fetchHomeDockingList
	} from '@/api/docking';
	import {
		fetchAd
	} from '@/api/ad';

	export default {
		name: 'HomeView',
		components: {
			HomeBanner,
			NavBar
		},
		data() {
			return {
				banner_list: ['https://pc.qingwuit.com/dist/images/default_banner.jpg'],
				projectListQuery: {
					pageNum: 1,
					pageSize: 9,
					ifshouyetuijian: 'Y'
				},
				projectList: [],
				projectListTotal: 0,
				yuanquListQuery: {
					pageNum: 1,
					pageSize: 12,
					ifshouyetuijian: 'Y'
				},
				yuanquList: [],
				yuanquListTotal: 0,
				dictListQuery: {
					dictType: 'sys_shouyeshuliang'
				},
				dictList: [],
				swiperList: [],
				newsList: [],
				newsListQuery: {
					zixunleixing: 1,
					pageNum: 1,
					pageSize: 4
				},
				dockingList: [],
				dockingListTotal: 0,
				dockingListQuery: {
					pageNum: 1,
					pageSize: 3
				},
				ad1: {},
				ad2: {},
				ad3: {},
				loading: false,
				whether: false,
				yuanquForm: {
					type: '1',
					yuanquname: '',
					name: '',
					mobile: ''
				},
				duijieActive: false,
				activeHeight: 'height:45px;border-radius: 10px;',
				myid: this.$router.params
			};
		},
		created() {
			this.getProjectList();
			this.getYuanquList();
			this.getDictList();
			this.getSwiperList();
			this.getNewsList();
			this.getDockingList();
			this.getAd();
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll);

			this.$nextTick(() => {
				let states = this.$route.query.state;
				console.log(states);
				if (states == 0) {
					this.changeDuijieActive(1);
				} else {
					this.changeDuijieActive(0);
				}
			});
		},
		destroyed() {
			window.removeEventListener('scroll', this.handleScroll);
		},
		methods: {
			getProjectList() {
				this.loading = true;
				fetchProjectList(this.projectListQuery).then(response => {
					this.projectList = response.data;
					this.projectListTotal = response.total;
					this.loading = false;
				});
			},
			getYuanquList() {
				this.loading = true;
				fetchParkList(this.yuanquListQuery).then(response => {
					this.yuanquList = response.data;
					this.yuanquListTotal = response.total;
					this.loading = false;
				});
			},
			getDictList() {
				this.loading = true;
				fetchDictList(this.dictListQuery).then(response => {
					this.dictList = response.data;
					this.loading = false;
				});
			},
			getSwiperList() {
				this.loading = true;
				fetchSwiperList().then(response => {
					this.swiperList = response.data;
					this.loading = false;
				});
			},
			getNewsList() {
				this.loading = true;
				fetchHomeNewsList(this.newsListQuery).then(response => {
					this.newsList = response.data.slice(0, 4);
					this.loading = false;
				});
			},
			getDockingList() {
				this.loading = true;
				fetchHomeDockingList(this.dockingListQuery).then(response => {
					this.dockingList = response.data;
					this.dockingListTotal = response.total;
					this.loading = false;
				});
			},
			getAd() {
				console.info(1);
				fetchAd('home_1').then(response => {
					this.ad1 = response.data;
				});
				fetchAd('home_2').then(response => {
					this.ad2 = response.data;
				});
				fetchAd('home_3').then(response => {
					this.ad3 = response.data;
				});
			},
			setContent(value) {
				value = value
					.replace(/<\/?.+?\/?>/g, '')
					.replace(/<[^>]+>/g, '')
					.replace(/&nbsp;/gi, '')
					.replace(/\s/g, '');
				if (!value) return '';
				if (value.length > 300) {
					return value.slice(0, 300) + '...';
				}
				return value;
			},
			goToParkListPage() {
				this.$router.push({
					name: 'yuanqu-list'
				});
			},
			goToParkDetailPage(id) {
				this.$router.push({
					name: 'yuanqu-detail',
					params: {
						id: id
					}
				});
			},
			go2ToParkDetailPage(id) {
				this.$router.push({
					name: 'yuanqu-detail',
					params: {
						id: id
					}
				});
			},
			goToProjectListPage() {
				this.$router.push({
					name: 'project-list'
				});
			},
			goToProjectDetailPage(id) {
				this.$router.push({
					name: 'project-detail',
					params: {
						id: id
					}
				});
			},
			goToProjectDockingListPage() {
				this.$router.push({
					name: 'project-docking'
				});
			},
			goToProjectDockingDetailPage(id) {
				this.$router.push({
					name: 'project-docking-detail',
					params: {
						id: id
					}
				});
			},
			goToNewsListPage() {
				this.$router.push({
					name: 'news-list'
				});
			},
			goToNewsDetailPage(id) {
				this.$router.push({
					name: 'news-detail',
					params: {
						id: id
					}
				});
			},
			goToCreateProject() {
				this.$router.push({
					name: 'ProjectsView'
				});
			},
			goToCreatePark() {
				this.$router.push({
					name: 'ParksView'
				});
			},
			goToCreateDocking() {
				this.$router.push({
					name: 'MineNewsView'
				});
			},
			windowOpen(url) {
				window.open(url);
			},
			projectPrePage() {
				this.projectListQuery.pageNum -= 1;
				if (this.projectListQuery.pageNum < 1) {
					this.projectListQuery.pageNum = 1;
				}
				this.getProjectList();
			},
			projectNextPage() {
				this.projectListQuery.pageNum += 1;
				let maxPage = Math.ceil(this.projectListTotal / this.projectListQuery.pageSize);
				if (this.projectListQuery.pageNum > maxPage) {
					this.projectListQuery.pageNum = maxPage;
				}
				this.getProjectList();
			},
			yuanquPrePage() {
				this.yuanquListQuery.pageNum -= 1;
				if (this.yuanquListQuery.pageNum < 1) {
					this.yuanquListQuery.pageNum = 1;
				}
				this.getYuanquList();
			},
			yuanquNextPage() {
				this.yuanquListQuery.pageNum += 1;
				let maxPage = Math.ceil(this.yuanquListTotal / this.yuanquListQuery.pageSize);
				if (this.yuanquListQuery.pageNum > maxPage) {
					this.yuanquListQuery.pageNum = maxPage;
				}
				this.getYuanquList();
			},
			dockingPrePage() {
				this.dockingListQuery.pageNum -= 1;
				if (this.dockingListQuery.pageNum < 1) {
					this.dockingListQuery.pageNum = 1;
				}
				this.getDockingList();
			},
			dockingNextPage() {
				this.dockingListQuery.pageNum += 1;
				let maxPage = Math.ceil(this.dockingListTotal / this.dockingListTotal.pageSize);
				if (this.dockingListTotal.pageNum > maxPage) {
					this.dockingListTotal.pageNum = maxPage;
				}
				this.getDockingList();
			},
			addContact() {
				createContact(this.yuanquForm).then(response => {
					if (response.result === 1) {
						this.yuanquForm = {
							type: '1',
							yuanquname: '',
							name: '',
							mobile: ''
						};
						this.$notify({
							title: '成功',
							message: response.msg,
							type: 'success',
							duration: 2000
						});
					} else {
						this.$notify({
							title: '错误',
							message: response.msg,
							type: 'error',
							duration: 2000
						});
					}
				});
			},
			handleScroll() {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				var offsetTop = document.querySelector('#createParkForm').offsetTop;
				this.whether = scrollTop > offsetTop;
			},
			changeDuijieActive(state) {
				if (state == 0) {
					this.duijieActive = false;
					this.activeHeight = 'height:45px;border-radius: 10px;';
				} else {
					this.duijieActive = true;
					this.activeHeight = '';
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.leftIcon {
		position: absolute;
		top: 0;
		left: 13px;
		width: 19px;
		height: 43px;
		background: url('../assets/flag.png') no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		text-align: center;
		line-height: 16px;
		font-size: 6px;
		color: #ffffff;
		padding-top: 2px;
	}

	.leftVR {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 54px;
		height: 54px;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 100%;
		background-size: cover;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.leftVR .leftVRText {
		padding-top: 10px;
		color: white;
		font-size: 25px;
	}

	/* duijie开始 */
	.duijie .duijieitem {
		position: fixed;
		right: 5px;
		bottom: 5px;
		width: 286px;
		height: 343px;
		background: #ffffff;
		box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.19);
		border-radius: 10px;
	}

	.duijie .duijiexiangmu {
		height: 45px;
		font-size: 1.25rem;
		font-weight: 600;
		color: #ffffff;
		letter-spacing: 0.0625rem;
		background: #fe7743;
		display: flex;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		display: flex;
		align-items: center;
	}

	.duijie .duijiexiangmu .duijiexiangmuText {
		margin-left: 1rem;
		font-size: 14px;
		font-family: PingFangHK-Semibold, PingFangHK;
		font-weight: 600;
		color: #ffffff;
		line-height: 20px;
	}

	.duijie .xingming {
		width: 14rem;
		height: 2.75rem;
		line-height: 2.75rem;
		background: #f9faf9;
		border-radius: 4px;
		margin-top: 1.1875rem;
		margin-left: 2.0625rem;
		padding-left: 0.625rem;
	}

	.duijie .fasong {
		width: 100%;
		height: 44px;
		line-height: 2.75rem;
		background: #fe7743;
		border-radius: 4px;
		margin-top: 1.1875rem;
		text-align: center;
		font-size: 0.875rem;
		font-family: PingFangHK-Semibold, PingFangHK;
		font-weight: 600;
		color: #ffffff;
		display: block;
	}

	.news-title {
		color: #000000;
	}

	.news-title:hover {
		color: #fe7743;
	}


	// 滚动开始1
	@keyframes rowup {
		0% {
			-webkit-transform: translate3d(0px, 0, 0);
			transform: translate3d(920px, 0, 0);
		}

		100% {
			-webkit-transform: translate3d(0px, 0px, 0);
			transform: translate3d(20px, 0px, 0);
		}
	}

	.list1 {
		position: relative;
		height: 200px;
		overflow-Y: auto;
		font-size: 15px;
		font-family: 'Microsoft Yahei';
		display: contents;
	}

	.rowup {
		-webkit-animation: 20s rowup linear infinite normal;
		animation: 20s rowup linear infinite normal;
		position: relative;
	}

	// 滚动结束1

	// 滚动开始2
	@keyframes rowup2 {
		0% {
			-webkit-transform: translate3d(0px, 0, 0);
			transform: translate3d(0px, 0, 0);
		}

		100% {
			-webkit-transform: translate3d(0px, 0px, 0);
			transform: translate3d(-900px, 0px, 0);
		}
	}

	.list2 {
		position: relative;
		height: 200px;
		overflow-Y: auto;
		font-size: 15px;
		font-family: 'Microsoft Yahei';
		display: contents;
	}

	.rowup2 {
		-webkit-animation: 20s rowup2 linear infinite normal;
		animation: 20s rowup2 linear infinite normal;
		position: relative;
	}

	// 滚动结束2

</style>